<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        /* 设置背景颜色 */
        .one {
            width: 300px;
            height: 50px;
            background-color: skyblue;
        }
        /* 设置背景图片，用于一些装饰性的小图片或者是超大的背景图片 */
        .two {
            width: 800px;
            height: 400px;
            /* 不要落下url（） */
            background-image: url(images/log.jpg);
        }
        /* 背景平铺 */
        .three {
            width: 800px;
            height: 400px;
            background-image: url(images/log2.jpg);
            /* 1.默认情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 2.沿x方向平铺 */
            /*  background-repeat: repeat-x */
            /* 3.沿x方向平铺 */
            /*  background-repeat: repeat-y */
            /* 4.背景图片不平铺 */
            background-repeat: no-repeat;
            /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */
            background-color: skyblue;
        }
        /* 设置背景图片位置 */
        .four {
            width: 800px;
            height: 400px;
            background-image: url(images/log2.jpg);
            background-repeat: no-repeat;
            background-color: palegreen;
            /* 1.如果是方位名词， center top和top center效果是等价的，和顺序没有关系 */
            background-position: center top;

            /* 2.如果只指定了一个方位名词，另外一个值省略，则第二个值默认居中对齐 */
            /* background-position: right；   此时，水平一定是靠右侧对齐，第二个参数省略y轴是垂直居中显示的*/

            /* 3.背景位置-精准单位 */
            /*  background-position: 20px  50px      20px一定是x轴方向的距离，50px一定是y轴方向的距离 */
            /* background-position: 20px         20px是指x轴方向的距离，y轴没有设置，默认垂直居中 */

            /* 4. 参数混合单位 */
            /* 如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标 */
            /* background-position: 20px  center */
        }
        
    </style>

</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
</body>
</html>